<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css"> 
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
                <li><a href="#"><span></span>手机版</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="header wrapper">
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
        </div> 
        <div class="search">
            <input type="text" placeholder="搜一搜">
            <!--  -->
            <span></span>
        </div>
        <div class="car">
            <span>7</span>
        </div>
    </div>
    <!-- 横幅:banner -->
    <div class="banner">
        <div class="wrapper">
            <ul>
                <li><a href="#"><img src="./uploads/banner_1.png"></a></li>
            </ul>
            <!-- 侧导航 --> 
            <div class="aside">
                <ul>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">美食<span> 面点 干果</span></a></li>
                    <li><a href="#">餐厨<span> 数码产品</span></a></li>
                    <li><a href="#">电器<span> 床品 四件套 被枕</span></a></li>
                    <li><a href="#">居家<span> 奶粉 玩具 辅食</span></a></li>
                    <li><a href="#">洗护<span> 洗发 洗护 美妆</span></a></li>
                    <li><a href="#">孕婴<span> 奶粉 玩具</span></a></li>
                    <li><a href="#">服饰<span> 女装 男装</span></a></li>
                    <li><a href="#">杂货<span> 户外 图书</span></a></li>
                    <li><a href="#">品牌<span> 品牌制造</span></a></li>
                </ul>
            </div>
            <!-- 箭头 -->

            <!-- prev：上一个图片 -->
            <a href="#" class="prev"></a>

               <!-- prev：下一个图片 -->
            <a href="#" class="next"></a>
            <!-- 圆点：当前状态：current/active -->
            <!-- js找到用户点击的li 添加类名 li变成白色的 -->
            <ol>
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
    <!-- 鲜新好物 -->
    <div class="goods wrapper">
        <!-- 头部内容 -->
        <div class="hd">
            <h2>鲜新好物<span>鲜新好物 品质靠谱</span></h2>
            <a href="#"> 查看全部</a>
        </div>
        <!-- 身体内容 -->
        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<span>899</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_2.jpg" alt="">
                        <h3>智能环绕3D空调</h3>
                        <div>￥<span>1299</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_3.jpg" alt="">
                        <h3>广东软软糯米煲仔饭</h3>
                        <div>￥<span>129</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_4.jpg" alt="">
                        <h3>罗西机械智能手表</h3>
                        <div>￥<span>3399</span></div>
                        <b>新品</b>
                    </a>
                </li>
            </ul>
        </div>
    </div>
<!-- 版权区域-->
    <div class="footer">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li>
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>价格亲民</span>
                    </li>
                    <li><span>菜品多样</span></li>
                    <li><span>送达准时</span></li>
                </ul>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">帮助中心</a> |
                    <a href="#">售后服务</a> |
                    <a href="#">配送与验收</a> |
                    <a href="#">商务合作</a> |
                    <a href="#">搜索推荐</a> |
                    <a href="#">友情链接</a> 
                </p>
                <p>CopyRight @ 小兔鲜儿</p>
            </div>
        </div>
    </div>
</body>
</html>